<template>
  <el-upload
    ref="elupload"
    :file-list="fileList"
    :headers="headers"
    :action="action"
    v-bind="$attrs"
    :before-remove="beforeRemoveHandle"
    :on-preview="previewHandle"
    :class="$style.upload"
    :on-remove="onRemoveHandle"
    :show-file-list="showFileList"
    :on-success="onSuccessHandle"
    :on-change="onChangeHandle"
    v-on="$listeners"
  >
    <slot>
      <!-- <div :class="$style.trigger">
        <i class="el-icon-plus" />
        <p :class="$style.tip">共{{ fileList.length }}个文件</p>
      </div> -->
      <div v-if="!disabled" style="text-align: left;">
        <Button type="primary">{{ butText }}</Button>
      </div>
    </slot>
  </el-upload>
</template>
<script>
import { getToken } from '@/utils/auth'
import { deepCopy, isType } from '@/utils'
export default {
  name: 'Upload',
  inheritAttrs: false,
  props: {
    existFileList: {
      type: Array,
      default: () => []
    },
    preventRemove: { // 是否阻止删除
      type: Boolean,
      default: false
    },
    onPreview: { // 单击已上传文件钩子
      type: Function,
      default: undefined
    },
    beforeRemove: { // 删除
      type: Function,
      default: undefined
    },
    action: { // FIXME:上传地址
      type: String,
      default: '/'
    },
    onRemove: {
      type: Function,
      default: undefined
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    onSuccess: {
      type: Function,
      default: undefined
    },
    onChange: {
      type: Function,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    butText: {
      type: String,
      default: '选取文件'
    }
  },
  data() {
    return {
      fileList: [],
      headers: this.getHeaders()
    }
  },
  created() {
    this.fileList.unshift(...deepCopy(this.existFileList))
  },
  methods: {
    // 上传时带上权限
    getHeaders() {
      const headers = {}
      if (this.$store.getters.token) {
        headers['token'] = getToken()
        headers['Authorization'] = `Bearer ${getToken()}`
      }
      return headers
    },
    // 单击上传项目时,将上传文件列表一起抛出
    previewHandle(file) {
      if (isType(this.onPreview, 'Function')) {
        this.onPreview(file, this.fileList)
      }
    },
    // 删除文件前
    async beforeRemoveHandle(file, fileList) {
      if (this.preventRemove) {
        return await Promise.reject()
      }
      if (this.beforeRemove instanceof Function) {
        const success = this.beforeRemove(file, fileList)
        if (success instanceof Promise) {
          return success
        }
        if (!success) {
          return await Promise.reject()
        }
      }
      const h = this.$createElement
      return await this.$msgbox({
        title: '删除',
        message: h('div', [
          '是否删除',
          h('span', { style: { color: 'red' }}, file.name),
          '文件？'
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
    },
    // 删除文件成功
    onRemoveHandle(file, fileList) {
      this.fileList = [...deepCopy(fileList)]
      if (this.onRemove instanceof Function) {
        this.onRemove(file, this.fileList)
        this.$emit('cancel', file, this.fileList)
      }
    },
    // 上传成功
    onSuccessHandle(response, file, fileList) {
      this.fileList = [...fileList]
      if (this.onSuccess instanceof Function) {
        this.onSuccess(response, file, fileList)
      }
    },
    // 文件变化
    onChangeHandle(file, fileList) {
      this.$emit('currentUpload', file, fileList)
      if (this.onChange instanceof Function) {
        this.onChange(file, fileList)
      }
      this.fileList = [...fileList]
    },
    // 清空文件
    clearFiles() {
      this.$refs.elupload.clearFiles()
    }
  }
}
</script>
<style lang="scss" module>
.upload {
  display: inline-block;
  .trigger {
    text-align: center;
    font-size: 60px;
    .tip {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      padding: 0;
      margin: 10px 0;
    }
  }
  & [class*="el-upload--text"] {
    display: block;
  }
}
</style>
